<template>
  <page-header-wrapper>
    <!-- <template v-slot:content>
      <div class="page-header-content">
        
      </div>
    </template>
    <template v-slot:extraContent>
      <div>
      	
      </div>
    </template> -->
    
    <a-row :gutter="12">
      <a-col :span="10">
        <a-card title="角色列表">
          <a-button type="primary" size="small" slot="extra" @click="addRole"> + 添加新角色</a-button>
          <a-list bordered :data-source="list">
            <a-list-item slot="renderItem" slot-scope="item, index" :class="{active:item.id==role.id}" @click="selectRole(item)">
              {{ item.name }}
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
      <a-col :span="14">
        <a-card :title="title">
          <div slot="extra" v-if="formType">
            <a-popconfirm
              v-if="formType=='edit'"
              :title="'确定要删除吗？'"
              size="small" 
              @confirm="deleteRole()"
            >
              <a-button :type="'danger'" size="small">
                删除
              </a-button>
            </a-popconfirm>
            <a-button type="default" size="small" slot="extra" style="margin-left: 5px;" @click="cancelRole"> 取消</a-button>
            <a-button type="primary" size="small" slot="extra" style="margin-left: 5px;" @click="createRole"> 保存</a-button>
          </div>
          <div v-if="formType">
            <a-input addon-before="角色名称" v-model="role.name" />
            <a-divider>角色授权</a-divider>
            <a-tree
              v-if="menu.length"
              v-model="checkedKeys"
              checkable
              :tree-data="menu"
              @expand="onExpand"
              @select="onSelect"
            />
            <a-empty v-else />
          </div>
          <div v-if="!formType">
            <p>点击“添加新角色”按钮创建一个角色</p>
            <p>或者从左侧角色列表中选择一个进行编辑</p>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </page-header-wrapper>
</template>

<script> 
export default {
  name: 'Role',
  mixins:[  ],
  components: {
    
  },
  data () {
    return {
      formType:null,
      title:'新增/编辑角色',
      list:[],
      menu:[
      
      ],
      checkedKeys:[],
      name:'',
      role:{
        name:''
      }
    }
  },
  computed: {
    user () {
      return this.$store.getters.userInfo
    }
  },
  created () {
    
  },
  mounted () {
    this.reload();
    this.getMenuJson();
  },
  methods: {
    selectRole(item){
      this.role = item;
      this.checkedKeys = JSON.parse(this.role.profile);
      this.formType = 'edit'
      this.title = '编辑角色'
    },
    cancelRole(){
      this.formType = null;
      this.title = '新增/编辑角色'
    },
    deleteRole(){
      const params = {
        table:"Role",
        data:[this.role.id]
      }
      this.$net.deleteItem(params)
      .then(res=>{
        this.$success('已删除')
        this.reload();
        this.cancelRole();
      })
    },
    createRole(){
      console.log(this.checkedKeys)
      if(!this.role.name){
        this.$info('角色名称必填')
        return;
      }
      if(this.checkedKeys.length==0){
        this.$info('角色授权必填')
        return;
      }
      if(this.role.id){
        const params = {
          table:"Role",
          data:[{
            id:this.role.id,
            fields:{
              name:this.role.name,
              profile:JSON.stringify(this.checkedKeys)
            }
          }]
        }
        this.$net.update(params)
        .then(res=>{
          this.$success('角色更新成功')
          this.formType = null;
          this.title = '新增/编辑角色'
          this.reload();
        })
      }else{
        const params = {
          table:"Role",
          data:[{
            name:this.role.name,
            profile:JSON.stringify(this.checkedKeys)
          }]
        }
        this.$net.create(params)
        .then(res=>{
          this.$success('角色创建成功')
          this.formType = null;
          this.title = '新增/编辑角色'
          this.reload();
        })
      }
      
    },
    onExpand(){

    },
    onSelect(){

    },
    addRole(){
      this.title = '新增角色'
      this.formType = 'create';
      this.role = [];
      this.checkedKeys = [];
    },
    reload(){
      const params = {
        table:"Role",
        filter:{},
        columns:['description', 'name', 'profile']
      }
      this.$net.query(params)
      .then(res=>{
        this.list = res['list']
      })
    },
    getMenuJson() {
      this.menu = JSON.parse(JSON.stringify(this.user.menu[0]['children']));
      this.genTree(this.menu);
    },
    genTree(menu) {
      for (let m of menu) {
        if (m.hasOwnProperty('children') || m.hasOwnProperty('action')) {
          m['key'] = m['link'];
          m['title'] = m['text'];
          delete m['link'];
          delete m['text'];
          delete m['icon'];
          delete m['hide'];
          if (!m.hasOwnProperty('children')) {
            m['children'] = JSON.parse(JSON.stringify(m['action']));
          }
          if (m.hasOwnProperty('action')) {
            delete m['action'];
          }
          this.genTree(m['children']);
        } else {
          m['key'] = m['id']||m['link'];
          m['title'] = m['name']||m['text'];
          delete m['id'];
          delete m['name'];
          delete m['code'];
          m['isLeaf'] = true;
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .active{
    background: #1890ff;
    color:#fff;
  }
</style>
